<template>
    <div class="editPassword-container">
        <el-card class="editPassword-box">
            <h1>管理员修改密码</h1>
            <el-form ref="form" label-position="left" :model="formData" :rules="formRules" label-width="100px">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="formData.userName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input v-model="formData.password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input v-model="formData.checkPassword" show-password placeholder="请确认密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="editPassword" type="primary">修改</el-button>
                    <el-button @click="seset" type="info">重置</el-button>
                    <el-button @click="back">返回</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data () {
        return {
            formData: {
                userName: '',
                password: '',
                checkPassword: ''
            },
            formRules: {
                userName: [
                    {required: true, trigger: 'change', message: '请输入用户名'}
                ],
                password: [
                    {required: true, trigger: 'change', message: '请输入密码'}
                ],
                checkPassword: [
                    {required: true, trigger: 'change', message: '请确定密码'}
                ]
            }
        }
    },
    methods: {
        editPassword () {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.formData.password !== this.formData.checkPassword) {
                        this.$notify.error({
                            title: '确定密码必须一致'
                        })

                        return false
                    }
                    axios({
                        url: 'http://127.0.0.1:3000/api/users/update',
                        method: 'put',
                        data: {
                            ...this.formData
                        }
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.seset()
                            this.$notify.success({title: '修改成功,返回登录页'})

                            this.$router.push({
                                path: '/login'
                            })
                        } else {
                            this.$notify.error({title: '修改失败'})
                        }
                    })
                }
            })
        },
        seset () {
            this.$refs.form.resetFields()
        },
        back () {
            this.$router.push({
                path: '/home'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .editPassword-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .editPassword-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80%;
            height: 80%;

            h1 {
                text-align: center;
                color: #329cfc;
            }
        }
    }
</style>